<template>
  <el-dialog :title="`${form.evalCategoryId ? '修改' : '添加'}检查类别`" :visible.sync="show" :close-on-click-modal="false" :show-close="!btnLoading" width="500px" @closed="closed">
    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px" style="margin-top: -20px">
      <el-form-item prop="evalCategoryId" class="hide" />
      <el-form-item label="检查项分类" style="margin-bottom: 10px">{{ chkitemType2label[chkitemType] }}</el-form-item>
      <el-form-item label="检查项" prop="chkitemCode">
        <el-select v-model="form.chkitemCode" placeholder="请选择检查项" :loading="firChkLoading" style="width: 100%">
          <el-option v-for="item in firChkList" :key="item.chkitemCode" :label="item.chkitemName" :value="item.chkitemCode" />
        </el-select>
      </el-form-item>
      <el-form-item prop="parentId" label="上级">
        <treeselect v-model="form.parentId" :options="treeOptions" :normalizer="normalizer" show-count placeholder="选择上级" />
      </el-form-item>
      <el-form-item label="名称" prop="evalCategoryName"><el-input v-model.trim="form.evalCategoryName" placeholder="请输入名称" :maxlength="255" /></el-form-item>
      <el-form-item label="类型" prop="categoryType">
        <el-select v-model="categoryTypeSelect" placeholder="请选择类型" multiple collapse-tags style="width: 100%">
          <el-option v-for="dict in dict.type.cq_eval_category_type" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="remark"><el-input v-model="form.remark" type="textarea" placeholder="请输入内容" :maxlength="255" /></el-form-item>
      <el-form-item label="排序" prop="seq"><el-input-number v-model="form.seq" :min="0" :max="1e8" :precision="0" controls-position="right" /></el-form-item>
    </el-form>
    <div slot="footer">
      <el-button type="primary" :loading="btnLoading" @click="btnSubmit">确 定</el-button>
      <el-button :disabled="btnLoading" @click="show = false">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
// 添加或修改检查类别
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { nameRule } from '@/utils/validate'
import { editFormMixin } from '@/utils/mixin'
import { evalChkitemTypeList } from '@/utils/baseData'
import { listNextLevel, addCategory, setCategory } from '@/api/checkScore/cqEval'
const chkitemType2label = evalChkitemTypeList.reduce((o, i) => !void (o[i.value] = i.label) && o, {})
export default {
  components: { Treeselect },
  mixins: [editFormMixin],
  dicts: ['cq_eval_category_type'],
  data() {
    return {
      chkitemType2label,
      primaryKey: 'evalCategoryId',
      addApi: addCategory,
      updateApi: setCategory,
      form: {
        chkitemType: '',
        chkitemCode: '',
        parentId: '',
        evalCategoryId: '',
        evalCategoryName: '',
        categoryType: '',
        remark: '',
        seq: 0
      },
      rules: {
        chkitemCode: [{ required: true, message: '请选择检查项' }],
        evalCategoryName: [{ required: true, message: '请输入名称' }, nameRule]
      },
      chkitemType: '', // 检查项分类
      firChkList: [], // 一级检查项
      firChkLoading: false,
      treeOptions: []
    }
  },
  computed: {
    categoryTypeSelect: {
      get() {
        const str = this.form.categoryType || ''
        return str.split(',').filter(i => i)
      },
      set(val) {
        this.form.categoryType = val.join(',')
      }
    }
  },
  methods: {
    closed() {
      this.$refs.form.resetFields()
      this.chkitemType = ''
      this.firChkList = []
      this.treeOptions = []
    },
    opened(item, { chkitemType, treeData }) {
      this.chkitemType = chkitemType
      this.treeOptions = [{ evalCategoryId: '', evalCategoryName: '主类目', children: treeData }]
      this.getFirChkList()
    },
    normalizer(node) {
      if (!node.children?.length) delete node.children
      return { id: node.evalCategoryId, label: node.evalCategoryName, children: node.children }
    },
    async getFirChkList() {
      this.firChkLoading = true
      const res = await listNextLevel({ chkitemCode: this.chkitemType }).catch(() => false)
      this.firChkLoading = false
      if (res === false) return
      this.firChkList = res.data || []
    }
  }
}
</script>
